<template>
  <div class="pages">
    <div class="gradient-background">
      <div class="loginBox _flex _justifyBetween _alignCenter">
        <div class="login-content">
          <div class="pagetitle">
            两微一端
          </div>
          <div class="login-date">
            <div @click.stop="showTime" class="time">
              <span>{{ timeTitle }}</span>
              <img src="~@/assets/liangweiyiduan/xia.png" alt />
            </div>
          </div>
        </div>
        <img src="~@/assets/index/head_img.png" class="top-img"  />
      </div>
    </div>
    <div class="mian">
      <div class="aggregate-box" v-loading="resolutionLoading">
        <div class="aggregate-info">
          <div>
            <img src="~@/assets/liangweiyiduan/user.png" alt="">
            <span>总用户</span>
          </div>
          <p>{{ formatIntSalary(UserInfoData.sumNum) }}</p>
        </div>
        <div class="aggregate-info">
          <div>
            <img src="~@/assets/liangweiyiduan/live.png" alt="">
            <span>日活</span>
          </div>
          <p v-if="UserInfoData">{{ formatIntSalary(UserInfoData.active) }}</p>
        </div>
      </div>
      <!-- ============================平台数据=========================== -->
      <div class="dataLi">
        <div class="data-head-nav">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">平台数据</span>
            </div>
          </div>
          <div class="tabBox" style="padding: 0.1rem 1.5rem;">
            <div class="tabItem" style="padding: 0.1rem 0.40rem;" :class="{ tabActive: activeIndex == index }" v-for="(item, index) in appArr"
              :key="index" @click="appClick(index, item)">{{ item.name }}</div>
          </div>
        </div>
        <div class="platform" v-loading="resolutionLoading">
          <div class="platform-box">
            <div class="type-info" style="padding:0.22rem 0 0.5rem;">
              <div>
                <span >{{ formatIntSalary(UserInfoData.install) }}</span>
                <p>下载量</p>
              </div>
              <div>
                <span>{{ formatIntSalary(UserInfoData.reg) }}</span>
                <p>注册量</p>
              </div>
              <div style="border:0;">
                <span >{{ formatIntSalary(UserInfoData.appOnline) }}</span>
                <p>登录人数</p>
              </div>
            </div>
            <div class="type-info" style="padding-bottom:0.3rem;">
              <div>
                <span>{{ formatIntSalary(UserInfoData.totalInstall) }}</span>
                <p>累计下载</p>
              </div>
              <div>
                <span >{{ formatIntSalary(UserInfoData.totalReg) }}</span>
                <p>累计注册</p>
              </div>
              <div style="border:0;">
                <span v-if="activity" >{{ formatIntSalary(UserInfoData.appActive) }}</span>
                <p>{{ activity }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- =====================新媒体数据===================== -->
      <div class="dataLi">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">新媒体数据</span>
            </div>
          </div>
        </div>
      <div class="newmedia" v-loading="resolutionLoading">
        <div class="newmedia-title">
          <div>平台名称</div>
            <div>累计关注</div>
            <div>日活</div>
            <div>新增</div>
        </div>
        <div class="newmedia-type" style="padding-top:0.3rem;">
          <div class="newmedia-type-left">
            <div>
              <img src="~@/assets/liangweiyiduan/WeChat.png" alt="">
              <span>微信公众号</span>
            </div>
          </div>
          <div class="_green">{{ formatIntSalary(UserInfoData.wechatUser) }}</div>
          <div>112</div>
          <div   :class="UserInfoData.wechatDailyUser>0?'_red':'_green'">{{ formatIntSalary(UserInfoData.wechatDailyUser) }}</div>
        </div>
        <div class="newmedia-type">
          <div class="newmedia-type-left">
            <div>
              <img src="~@/assets/liangweiyiduan/microblog.png" alt="">
              <span>微博</span>
            </div>
          </div>
          <div  class="_green">{{ formatIntSalary(UserInfoData.weiboUser) }}</div>
          <div>112</div>
          <div  :class="UserInfoData.weiboDailyUser>0?'_red':'_green'">{{ formatIntSalary(UserInfoData.weiboDailyUser) }}</div>
        </div>
        <div class="newmedia-type">
          <div class="newmedia-type-left">
            <div>
              <img src="~@/assets/liangweiyiduan/trill.png" alt="">
              <span>抖音</span>
            </div>
          </div>
          <div  class="_green">{{ formatIntSalary(UserInfoData.tiktokUser) }}</div>
          <div>112</div>
          <div :class="UserInfoData.tiktokDailyUser>0?'_red':'_green'">{{ formatIntSalary(UserInfoData.tiktokDailyUser) }}</div>
        </div>
      </div>
    </div>
      <!-- =====================图表========================== -->
      <div class="dataLi">
        <div class="data-head-nav">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">用户增长</span>
            </div>
          </div>
          <div class="tabBox" style="justify-content: flex-start;">
            <div class="tabItem" style="margin-right: 10px;" :class="{ tabActive: tabActive == index }"
              v-for="(item, index) in typeList" :key="index" @click="changeType(index, item)">{{ item.name }}</div>
          </div>
        </div>
      <div v-loading="publishLoading"
        style=" margin-bottom:0.3rem;">
              <UserGrowth :growthList="growthList" :type="type" :time="affirmTime"></UserGrowth>
      </div>
    </div>
    <div class="dataLi">
        <div class="data-head-nav">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">信息数据</span>
            </div>
          </div>
          <div class="tabBox" style="padding: 0.1rem 1.2rem;">
            <div class="tabItem" style="padding: 0.1rem 0.35rem;" :class="{ tabActive: infoIndex == index }" v-for="(item, index) in infoArr"
              :key="index" @click="infoClick(index, item)">{{ item.name }}</div>
          </div>
        </div>
      <Publish style="margin-bottom:0.3rem" :publishData="publishData"></Publish>
    </div>
    <div class="dataLi">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">直播统计</span>
            </div>
          </div>
        </div>
        <div>
          <h4 style="margin-left: 10px;">直播数据</h4>
          <div class="platform" v-loading="resolutionLoading">
          <div class="platform-box">
            <div class="type-info" style="padding:0.22rem 0 0.3rem;">
              <div>
                <span >{{ formatIntSalary(UserInfoData.install) }}</span>
                <p>直播场次</p>
              </div>
              <div>
                <span>{{ formatIntSalary(UserInfoData.reg) }}</span>
                <p>直播时长</p>
              </div>
              <div style="border:0;">
                <span >{{ formatIntSalary(UserInfoData.appOnline) }}</span>
                <p>观看人数</p>
              </div>
            </div>
            <div class="type-info" style="padding-bottom:0.3rem;">
              <div>
                <span>{{ formatIntSalary(UserInfoData.totalInstall) }}</span>
                <p>新增粉丝</p>
              </div>
              <div>
                <span >{{ formatIntSalary(UserInfoData.totalReg) }}</span>
                <p>评论人数</p>
              </div>
              <div style="border:0;">
                <span >400</span>
                <p>弹幕互动次数</p>
              </div>
            </div>
          </div>
        </div>
        </div>
        <h4 style="margin-left: 10px;">直播渠道</h4>
      <Read v-loading="readLoading" :readData="readData"></Read>
    </div>

      <!-- =======================时间选着弹窗========================== -->
      <div v-transfer-dom>
        <popup v-model="show">
          <div class="popup">
            <div>
              <div
                style=" display: flex;justify-content: space-between; align-items: center; border-bottom: 1px solid #F6F6F6;">
                <span style="color:#565656;font-size:0.28rem; padding: 0.2rem 0;">时间选择</span>
                <x-icon @click="closeX" type="ios-close-empty" size="30"></x-icon>
              </div>
              <div style="margin: 0.4rem 0;font-size: 0.26rem;display: flex;align-items: center;">
                <datetime v-model="timeValue" format="YYYY-MM-DD" :end-date="endDate" @on-change="timeschange">
                  {{ timeTitle2 }}
                </datetime>
                <x-icon type="ios-arrow-down" size="18"></x-icon>
              </div>
              <checker style="margin-bottom:0.24rem;font-size: 0.28rem;" v-model="time" radio-required
                default-item-class="demo1-item" selected-item-class="demo1-item-selected">
                <checker-item v-for="(ite, index) in timeList" :key="index" :value="ite.key"
                  @on-item-click="onItemClick()">{{ ite.value }}</checker-item>
              </checker>
              <x-button @click.native="affirm"
                style="color:#FFFFFF; background:#4570A9; margin:0.6rem 0 0.6rem;">确认</x-button>
            </div>
          </div>
        </popup>
      </div>
    </div>
  </div>
</template>

<script>
import LittleLine from "./echarts/littleLine"
import UserGrowth from "./echarts/userGrowth"
import Publish from "./echarts/publish"
import Read from "./echarts/read"
import { TransferDom, Popup, Checker, CheckerItem, DatetimeView, Datetime, XButton } from 'vux'
import { Collapse } from 'element-ui'
export default {
  directives: {
    TransferDom
  },
  components: {
    Popup,
    Checker,
    CheckerItem,
    DatetimeView,
    Datetime,
    XButton,
    LittleLine,
    UserGrowth,
    Publish,
    Read
  },
  data() {
    return {
      timeTitle: this.getYesterday(),
      time: '1',//时间
      show: false, //弹窗
      timeList: [
        {
          key: "1",
          value: "当日"
        },
        {
          key: "2",
          value: "近7日"
        },
        {
          key: "3",
          value: "近30日"
        },
        {
          key: "5",
          value: "本年"
        }
      ],
      appArr:[
        {
          name: "APP",
          value: "1"
        },
        {
          name: "小程序",
          value: "2"
        }
      ],
      infoArr:[
        {
          name: "信息发布",
          value: "1"
        },
        {
          name: "信息阅读",
          value: "2"
        }
      ],
      typeList: [
        {
          name: "全部",
          value: "5"
        },
        {
          name: "APP",
          value: "1"
        },
        {
          name: "小程序",
          value: "2"
        },
        {
          name: "微信公众号",
          value: "3"
        },
        {
          name: "微博",
          value: "4"
        },
        {
          name: "抖音",
          value: "6"
        }
      ],
      resolutionLoading: false,
      publishLoading: false,
      readLoading: false,
      tabActive: 0,
      activeIndex: 0,
      infoIndex: 0,
      startTime: '', //开始时间
      endTime: '',//结束时间
      starttimeRi: '', //结束时间日期
      endtimeRi: '',//开始时间日期
      affirmTime: '1',//确定之后的时间
      affirmStartTime: this.getYesterday(),//确定之后的开始时间
      affirmEndTime: this.getYesterday(),//确定之后的结束时间
      userStartTime: this.getDayN(-29),//用户增长开始时间
      userEndTime: this.getYesterday(),//用户增长结束时间
      UserInfoData: {}, //用户信息
      publishData: {}, //信息发布
      readData: {}, //信息阅读
      growthList: [],
      type: '5',//类型
      activity: '日活',
      needRefresh: false,
      timeTitle2: this.getYesterday(),
      timeValue: '',
      currentTime: '',
      endDate: this.getYesterday()
    }
  },
  created() {
    this.timeId = setInterval(() => {
      if (this.type == "4" && (!this.affirmStartTime || !this.affirmEndTime)) {
        return false
      } else {
        this.getAllUserInfo(true);
        // this.getUserGrowth(this.type, true)
        this.getUserGrowth(this.tabActive, true)
        this.getPublish();
        this.getRead(true);
      }
    }, 50000)
  },
  destroyed() {
    clearInterval(this.timeId)
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/lwydDetailPage") {
      this.needRefresh = false;
    } else {
      this.needRefresh = true;
      clearInterval(this.timeId)
    }
    next();
  },
  activated() {
    if (this.needRefresh) {
      this.time = "1"; //时间
      this.affirmTime = "1"
      this.timeTitle = this.getYesterday()
      this.tabActive = 0
      this.type = '5'
      this.activity = "日活"
      this.getAllUserInfo();
      // this.getUserGrowth(this.type)
      this.getUserGrowth(this.tabActive)
      this.getPublish();
      this.getRead();
      this.timeId = setInterval(() => {
        if (this.type == "4" && (!this.affirmStartTime || !this.affirmEndTime)) {
          return false
        } else {
          this.getAllUserInfo(true);
          // this.getUserGrowth(this.type, true)
          this.getUserGrowth(this.tabActive, true)
          this.getPublish();
          this.getRead(true);
        }
      }, 50000)
    }
  },
  mounted() {
    this.getAllUserInfo();
    // this.getUserGrowth(this.type)
    this.getUserGrowth(this.tabActive)
    this.getPublish();
    this.getRead();
  },
  methods: {
// 平台数据
    appClick(idx,e) {
      this.activeIndex = idx;
    },
    // 信息数据
    infoClick(idx,e) {
      this.infoIndex = idx;
    },
    //千分数
    formatIntSalary(num) {
      if (!num && num != 0) return;
      num = parseInt(num)
        .toString()
        .split(".");
      // // console.log("第一次处理后的num",num);
      num[0] = num[0].replace(new RegExp("(\\d)(?=(\\d{3})+$)", "ig"), "$1,");
      // // console.log("第一次处理后的num",num[0]);
      return num.join(".");
    },
    //展示当天时间
    getYesterday() {
      //获取当天
      let currentDate = new Date().getTime();
      let prevTime = currentDate;
      let prevDate = new Date(prevTime);
      const time = str => {
        if (str >= 10) {
          return str;
        } else {
          return "0" + str;
        }
      };
      let yesterday =
        time(new Date(prevDate).getFullYear()) +
        "-" +
        time(new Date(prevDate).getMonth() + 1) +
        "-" +
        time(new Date(prevDate).getDate());
      return yesterday;
    },
    //显示底部弹窗
    showTime() {
      this.show = true
      this.time = this.affirmTime
      this.startTime = this.affirmStartTime
      this.endTime = this.affirmEndTime
    },
    //关闭底部弹窗
    closeX() {
      this.show = false
    },
    //日 周 月 点击事件
    onItemClick() {
      this.startTime = ''
      this.endTime = ''
    },
    timeschange() {
      this.currentTime = this.timeValue.replace(/-/g, '/')
      this.timeTitle2 = this.timeValue
    },
    //确定
    affirm() {
      if (this.time == "4" && (!this.startTime || !this.endTime)) return
      this.show = false
      this.affirmTime = this.time
      // this.affirmEndTime = this.endTime
      // this.affirmStartTime = this.startTime
      if (this.affirmTime == "1") {
        // this.timeTitle = this.getYesterday()
        // this.affirmStartTime = this.timeTitle2
        // this.affirmEndTime = this.timeTitle2
        this.affirmStartTime = this.timeTitle2
        this.affirmEndTime = this.timeTitle2
        this.userStartTime = this.getDayN(-29, this.currentTime)
        this.userEndTime = this.timeTitle2
        this.timeTitle = this.timeTitle2;
        this.activity = "日活"
      }
      if (this.affirmTime == "2") {
        // this.timeTitle = "本周"
        this.affirmStartTime = this.getDayN(-6, this.currentTime)
        this.affirmEndTime = this.timeTitle2
        this.userStartTime = this.getDayN(-6, this.currentTime)
        this.userEndTime = this.timeTitle2
        // console.log(this.getDayN(-6, this.currentTime))
        this.timeTitle = this.getDayN(-6, this.currentTime) + " " + " " + this.timeTitle2;
        this.activity = "周活"
      }
      if (this.affirmTime == "3") {
        // this.timeTitle = "本月"
        this.affirmStartTime = this.getDayN(-29, this.currentTime)
        this.affirmEndTime = this.timeTitle2
        this.userStartTime = this.getDayN(-29, this.currentTime)
        this.userEndTime = this.timeTitle2
        // console.log(this.getDayN(-29, this.currentTime))
        this.timeTitle = this.getDayN(-29, this.currentTime) + " " + " " + this.timeTitle2;
        this.activity = "月活"
      }
      if (this.affirmTime == "5") {
        // this.timeTitle = "本年"
        this.affirmStartTime = new Date().getFullYear() + '-01-01'
        // this.affirmEndTime = this.getYesterday()
        this.affirmEndTime = this.endtime = new Date().getFullYear() + '-12-31'
        this.userStartTime = new Date().getFullYear() + '-01-01'
        this.userEndTime = this.endtime = new Date().getFullYear() + '-12-31'
        this.timeTitle = new Date().getFullYear() + '-01-01' + " " + " " + this.getYesterday();
        this.activity = ""
      }
      if (this.affirmTime == "4") {
        this.activity = ""
        // this.timeTitle = this.startTime.replace(/-/g, ".") + "-" + this.endTime.replace(/-/g, ".")
        this.timeTitle = this.starttimeRi + " " + " " + this.endtimeRi
      }
      this.getAllUserInfo();
      // this.getUserGrowth(this.type)
      this.getUserGrowth(this.tabActive)
      this.getPublish();
      this.getRead();
    },
    //改变数据类型触发
    changeType(index, e) {
      // console.log("tabActive", this.tabActive)
      this.tabActive = index;
      this.type = e.value
      // console.log("type", this.type)
      // this.getUserGrowth(this.type)
      this.getUserGrowth(this.tabActive)
    },
    //详情
    onDetail(type) {
      this.$router.push(`/lwydDetailPage?type=${type}&&time=${this.affirmTime}&&beginDate=${this.affirmStartTime}&&endDate=${this.affirmEndTime}`)
    },
    //所有平台数据
    getAllUserInfo(flag) {
      if (!flag) {
        this.resolutionLoading = true
      }
      let that = this;
      // let url = "SocialPlatformAndApp/allUserInfo";
      let url = "SocialPlatformAndAppNew/allUserInfo";
      let data = {
        // time: this.affirmTime,
        // beginDate: this.affirmStartTime ? this.affirmStartTime + ":00" + ":00" : "",
        // endDate: this.affirmEndTime ? this.affirmEndTime + ":00" + ":00" : ""
        beginDate: this.affirmStartTime,
        endDate: this.affirmEndTime
      };
      this.$Post(
        url,
        data,
        ({ data }) => {
          this.UserInfoData = data;
          this.resolutionLoading = false
          // console.log(this.UserInfoData);
        },
        err => {
          this.$alertShow(err.msg);
        },
        true
      );
    },
    //用户增长数据
    getUserGrowth(type, flag) {
      if (!flag) {
        this.publishLoading = true
      }
      // let url = "SocialPlatformAndApp/userIncreaseInfo";
      let url = "SocialPlatformAndAppNew/userIncreaseInfo";
      // 给后台的请求参数
      let data = {
        // type,
        time: this.affirmTime,
        // beginDate: this.affirmStartTime ? this.affirmStartTime + ":00" + ":00" : "",
        // endDate: this.affirmEndTime ? this.affirmEndTime + ":00" + ":00" : ""
        // beginDate: this.affirmStartTime,
        // endDate: this.affirmEndTime
        beginDate: this.userStartTime,
        endDate: this.userEndTime
      }
      this.$Post(
        url,
        data,
        ({ data }) => {
          // this.growthList = data.list;

          if (type == "0") {
            this.growthList = data.totalList;
          }
          if (type == "1") {
            this.growthList = data.appList;
          }
          if (type == "2") {
            this.growthList = data.appletList;
          }
          if (type == "3") {
            this.growthList = data.wechatList;
          }
          if (type == "4") {
            this.growthList = data.weiboList;
          }
          if (type == "5") {
            this.growthList = data.douyinList;
          }

          this.publishLoading = false
        },
        err => {
          this.$alertShow(err.msg);
        },
        true
      )
    },
    //信息发布数据
    getPublish() {
      let time = this.affirmTime;
      // let url = "SocialPlatformAndApp/publishInfo";
      let url = "SocialPlatformAndAppNew/publishInfo";
      // 给后台的请求参数
      let data = {
        // time: time,
        // beginDate: this.affirmStartTime ? this.affirmStartTime + ":00" + ":00" : "",
        // endDate: this.affirmEndTime ? this.affirmEndTime + ":00" + ":00" : ""
        beginDate: this.affirmStartTime,
        endDate: this.affirmEndTime
      };
      this.$Post(
        url,
        data,
        ({ data }) => {
          this.publishData = data;
          // // console.log(this.publishData)
        },
        err => {
          this.$alertShow(err.msg);
        },
        true
      );
    },
    //信息阅读数据
    getRead(flag) {
      if (!flag) {
        this.readLoading = true
      }
      let time = this.affirmTime;
      // let url = "SocialPlatformAndApp/readInfo";
      let url = "SocialPlatformAndAppNew/readInfo";
      // 给后台的请求参数
      let data = {
        // time: time,
        // beginDate: this.affirmStartTime ? this.affirmStartTime + ":00" + ":00" : "",
        // endDate: this.affirmEndTime ? this.affirmEndTime + ":00" + ":00" : ""
        beginDate: this.affirmStartTime,
        endDate: this.affirmEndTime
      };
      this.$Post(
        url,
        data,
        ({ data }) => {
          this.readData = data;
          // // console.log(this.readData)
          this.readLoading = false
        },
        err => {
          this.$alertShow(err.msg);
        },
        true
      );
    },
    //锚点
    returnCom(num) {
      this.tabActive = num
      const returnEle = document.querySelector("#aabb");
      if (!!returnEle) {
        returnEle.scrollIntoView(true);
      }
      this.getUserGrowth(this.tabActive)
    },
    //近N天
    getDayN(day, currentTime) {
      if (currentTime) {
        var today = new Date(currentTime);
      } else {
        var today = new Date();
      }
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + (tMonth >= 10 ? tMonth : '0' + tMonth) + "-" + (tDate >= 10 ? tDate : '0' + tDate);
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = month;
      }
      return m;
    },

  }
}
</script>

<style lang="less" scoped>
@import "~vux/src/styles/close.less";
.time {
  color: #fff;
  font-size: 0.28rem;
  padding: 0.32rem 0 0.32rem;

  img {
    width: 0.32rem;
    height: 0.32rem;
    vertical-align: middle;
  }
}

//弹窗
.vux-popup-dialog {
  background: #fff;
}

.popup {
  padding: 0 0.2rem 0;
  min-height: 4rem;
}

//时间单选
.vux-checker-box {
  display: flex;
}

.demo1-item {
  margin-right: 0.16rem;
  font-size: 0.26rem;
  width: 22%;
  text-align: center;
  border: 1px solid #ececec;
  padding: 0.1rem 0 0.16rem;
  color: #9b9b9b;
  border-radius: 2px;
}

.demo1-item-selected {
  background-color: #303145;
  color: #fff;
}

//开始时间 结束时间
.timesRang {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
//总数据
.aggregate-box {
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-radius: 0.1rem;
  margin-bottom: 0.3rem;

  .aggregate-info {
    padding-top: 0.28rem;

    div {
      width: 1.6rem;
      display: flex;
      align-items: center;
    }
  }

  img {
    height: 0.48rem;
    margin-right: 0.12rem;
  }

  span {
    font-size: 0.24rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(137, 137, 137, 1);
  }

  p {
    padding: 0.24rem 0 0.24rem;
    font-size: 0.43rem;
    font-weight: normal;
    color: #81B337;
    font-family: DINAlternate-Bold, DINAlternate;
  }
}

//平台数据
.platform {
  background: #fff;
  margin-bottom: 0.3rem;
  border-radius: 0.1rem;

  .platform-box {
    padding: 0 0.14rem 0 0.24rem;

    .type-info {
      display: flex;

      div {
        width: 31.73%;
        text-align: center;
        border-right: 1px solid #eee;

        span {
          font-size: 0.35rem;
          font-family: DINAlternate-Bold, DINAlternate;
          color:#81B337;
        
        }

        p {
          padding-top: 2px;
          font-size: 0.22rem;
          font-family: PingFangSC-Regular, PingFang SC;
		  line-height:200%;
          font-weight: 400;
          color: rgba(137, 137, 137, 1);
        }
      }
    }
  }
}

//新媒体数据
.newmedia {
  background: #fff;
  padding: 0 0.14rem 0 0.24rem;
  border-radius: 0.1rem;
  margin-bottom: 0.3rem;

  .newmedia-title {
    display: flex;
    justify-content: space-between;
    font-size: 0.24rem;
    background-color: #cff9fc;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(137, 137, 137, 1);
    padding: 0.2rem 0 0.2rem;
    border-bottom: 1px solid #eee;
    div:nth-child(1) {
      width: 40%;
      text-align: center;
    }
    div {
      width: 25%;
      text-align: center;
    }
  }

  .newmedia-type {
    display: flex;
    align-items: center;
    padding-bottom: 0.4rem;
	font-size:0.25rem;

    .newmedia-type-left {
      display: flex;
      width: 37%;
      div:nth-child(1) {
        display: flex;
        align-items: center;
		font-size:0.3rem;
        
        img {
          height: 0.3rem;
        }

        span {
          padding-left: 0.1rem;
          font-size: 0.25rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          white-space: nowrap;
          color: rgba(61, 61, 61, 1);
        }

      
        text-align: center;
      }
    }

    div {
      width: 20%;
      text-align: center;
    }
  }
}

/deep/ .van-tab {
  flex: none;
  flex-basis: auto !important;
  padding: 0 0.25rem;
}

/deep/ .weui-cell_access {
  .weui-cell__ft {
    padding-right: 0.8rem;
  }
}
._green{
  color: rgba(129, 179, 55, 1);
}
._red{
  color: rgba(255, 0, 0, 1);
}
</style>